<template>
  <div class="trainEvaluation">
    <!-- <app-header></app-header> -->
    <div class="main">
      <div class="labbox">
          <h2 class="lab"><span></span>培训评估</h2>
     </div>
      <div style="padding:0 15px;">
        <x-table :cell-bordered="false">
          <thead>
            <tr>
              <th  style="text-align:left;padding-left:30px;">评估内容</th>
              <th style="text-align:right">选择评估指标</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td >对课程内容的评价</td>
              <td>
                <span class="btn1">选择</span>
              </td>
            </tr>
            <tr>
              <td>对课程内容的评价</td>
              <td>
                <span class="btn1">选择</span>
              </td>
            </tr>
            <tr>
              <td>对课程内容的评价</td>
              <td>
                <span class="btn1">选择</span>
              </td>
            </tr>
            <tr>
              <td>对课程内容的评价</td>
              <td>
                <span class="btn1">选择</span>
              </td>
            </tr>
           
          </tbody>
        </x-table>
      </div>
      <div class="successbox">
        <span class="sub_btn" @click="show=true">提&nbsp;&nbsp;交</span>
    </div>
    </div>

    <div v-transfer-dom class="answer">
      <popup v-model="show">
        <div class="msgDiv">
          <img src="../../assets/images/notice.png" >
          <p>请完成全部的评估内容!</p>
         <span class="confirmBtn">确 &nbsp;&nbsp; 定</span>
        </div>
      </popup>
    </div>
    
  </div>
</template>

<script>
import Header from "../../components/header";
import { XInput, Group, XButton, Cell, Selector, CellBox, XTable,TransferDom,Popup } from "vux";
export default {
    directives: {
    TransferDom
  },
  components: {
    "app-header": Header,
    XInput,
    XButton,
    Group,
    Cell,
    Selector,
    CellBox,
    XTable,
    Popup
  },
  data() {
    return {
      demo02: null,
      list: [
        { key: "0", value: "男" },
        { key: "1", value: "女" }
      ],
      show:false,
    };
  },
  created() {},
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.answer .vux-popup-dialog {
  position: fixed;
  left: calc((100% - 290px)/2);
  top:150px;
  width: 290px;
  height: 170px !important;
  border-radius: 10px;
  background: #ffffff;
  overflow-y: visible ; 
}
.msgDiv{
  text-align: center;
  padding: 13px 25px 20px 25px;
}
.msgDiv img{
  height: 50px;
  width: 50px;
}
.msgDiv p{
  font-size: 15px;
  color: #fe6000;
  font-weight: bold;
  margin-top: 5px;
}

.confirmBtn {
  display: inline-block;
  height: 40px;
  font-size: 15px;
  background-color: #2269ff;
  font-weight: bold;
  line-height: 40px;
  width: 100px;
  color: #ffffff;
  text-align: center;
  border-radius: 10px;
  margin-top: 16px;
}


.trainEvaluation .weui-cells__title {
  height: 40px;
  font-size: 15px;
  color: #2269ff;
  font-weight: bold;
  line-height: 40px;
  width: 100%;
}
.trainEvaluation .weui-cell {
  height: 50px;
  font-size: 15px;
  line-height: 50px;
  margin-right: 15px;
  font-weight: bold;
}
.trainEvaluation .weui-cell_select-after .weui-select {
  color: inherit !important;
  direction: rtl !important;
}
.trainEvaluation weui-input {
  color: #999999;
}
</style>>
<style scoped>
.main {
  padding: 0px 0px 25px 0px;
  text-align: left;
}
.labbox{
    height:45px;
    /* line-height: 45px; */
    padding-left:14px;
    display: flex;
    align-items: center;
}
.lab{
    color:#333;
   display: flex;
   justify-content: space-between;
   align-items: center;
   width:22%;
   font-size:17px;
   font-weight:bold;
}
.lab span{
   display: block;
   width:3px;
   height:18px;
   background: #2269ff;
   border-radius:3px;
   margin-right:1px;
}
.btn1 {
  display: inline-block;
  height: 30px;
  font-size: 14px;
  background-color: #2269ff;
  line-height: 30px;
  width: 70px;
  color: #ffffff;
  text-align: center;
  border-radius: 6px;
}
.successbox{
    display: flex;
    width:100%;
    justify-content: center;
    margin-top:60px;
    
}
.sub_btn{
    display: block;
    width:230px;
    height:45px;
    border-radius:5px;
    background: #2269ff;
    color:#fff;
    font-size:15px;
    line-height: 45px;
    font-weight:bold;
    text-align: center
    
}

.vux-table {
  line-height: normal;
  border-collapse: collapse;
}
.vux-table th {
  border-top: 0;
  font-weight: bold;
  font-size: 15px;
  text-align: left;
}
.vux-table th:last-child {
  text-align: center;
}
.vux-table:after {
  border-top: none;
}
.vux-table td {
  font-size: 14px;
  text-align: left;
}
.vux-table td,
.vux-table th {
  height: 50px;
  padding: 0 auto;
}
.vux-table tbody tr td:first-child{
    width:70%
}
.vux-table tbody tr td:last-child{
    width:30%;
    text-align: center;
}
thead {
  border: 0;
}
</style>
